<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// import TheWelcome from './components/TheWelcome.vue'
import Collapse from './components/Collapse/Collapse.vue'
import CollapseItem from './components/Collapse/CollapseItem.vue'
import { onMounted, ref } from 'vue'
import type { NameType } from './components/Collapse/types'
let modelValue = ref<NameType[]>(['a'])
// onMounted(() => {
//   setTimeout(() => {
//     modelValue.value = ['a', 'b']
//   }, 2000)
// })
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <Collapse v-model="modelValue" accorditon>
      <CollapseItem name="a" title="覆盖">
        <template #title> 第一个标题展示 </template>
        <h1>内容h1</h1>
        <div>内容div</div>
      </CollapseItem>
      <CollapseItem name="b" title="覆盖">
        <template #title> 第二个标题展示 </template>
        <h1>内容h1</h1>
        <div>内容div</div>
      </CollapseItem>
      <CollapseItem name="c" title="覆盖" disabled>
        <template #title> 第三个标题展示 </template>
        <h1>内容h1</h1>
        <div>内容div</div>
      </CollapseItem>
    </Collapse>
    <!-- <TheWelcome /> -->
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
